import React, { useState, useEffect } from 'react';
import { FileExcelOutlined, SearchOutlined,ReloadOutlined } from '@ant-design/icons';
import { Input, Button, Spin } from 'antd';
import { useHistory } from 'react-router-dom';
import { openNotification_util, fetchsync_util, useexcelauto, dealnullorundenfined, convertISODateTimeToYYYYMMDDHHMMSS } from '../util/util.js'
import Custom_table_hooks_config from '../newmes/custom_table_hooks_config.js'
var storage = window.localStorage;
import Sortable_new from '../newmes/sortable_new.js';
import { useLatest } from 'ahooks';
import useStore from '../../useStore.js'
import { clearCache,useDidCache,useDidRecover ,dropByCacheKey } from 'react-router-cache-route';

const Czlog = () => {
  const history = useHistory();
  const [loglb, setLoglb] = useState([])
  const [selectedRows, setselectedRows] = useState([])
  const [selectedRowKeys, setselectedRowKeys] = useState([])
  
  const [ysyj, setysyj] = useState('')
  const [bh, setbh] = useState('')
  const [isloading, setisloading] = useState(true)
  const [initSize, setinitSize] = useState() //table宽度大小

  const bhref = useLatest(bh)
  const ysyjref = useLatest(ysyj)
  const { nowroute, setnowroute,collapsed,setcollapsed } = useStore();

  const [columnarr, setcolumnarr] = useState([
    { show: true, title: "序号", key: "xuhao" ,width:"2rem"},
    { show: true, title: "原始语句", key: "ysyj",width:"30vw"},
    { show: true, title: "操作人", key: "czrxm",width:"4rem",searchtype:"select" },
    { show: true, title: "工号", key: "czrbh",width:"4rem" },
    { show: true, title: "时间", key: "czsj",width:"3rem" },
    { show: true, title: "类型", key: "czlx",width:"3rem",searchtype:"select" },
    { show: true, title: "主表", key: "czzb",width:"4rem" },
    { show: true, title: "业务", key: "ywmk" ,width:"4rem",searchtype:"select"},
    
    { show: true, title: "批号", key: "bh",width:"6rem" },

  ])


  const querylist = async () => {
    let rtdata = await fetchsync_util("/admin/sys/queryLogListAll", 'POST', {}, "json")

        //openNotification_util(rtdata.rtmessage)
rtdata.resultdata.forEach(element => {
      element.czsj = element.czsj == null ? '' : convertISODateTimeToYYYYMMDDHHMMSS(element.czsj)
    });
    setLoglb(dealnullorundenfined(rtdata.resultdata))
    setselectedRowKeys([])
    setselectedRows([])
    setisloading(false)
  }

  const handleQuery = async () => {
    let rtdata = await fetchsync_util("/admin/sys/queryLogListAll", 'POST',
      {bh: bhref.current,ysyj: ysyjref.current }, "json")
        //openNotification_util(rtdata.rtmessage)
rtdata.resultdata.forEach(element => {
      element.czsj = element.czsj == null ? '' : convertISODateTimeToYYYYMMDDHHMMSS(element.czsj)
    });
    setLoglb(dealnullorundenfined(rtdata.resultdata))
    setselectedRowKeys([])
    setselectedRows([])
    setisloading(false)

  }



  useEffect(() => {
    if (storage['Pc_log']) {
      var result = JSON.parse(storage['Pc_log'])
      setcolumnarr(result)
    }
    else {
      setcolumnarr(columnarr)
    }
    storage['Pc_log_initsize'] ? setinitSize(storage['Pc_log_initsize']) : setinitSize(1)
    document.addEventListener('keydown', handleKeyDown);
    querylist()
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };

  }, [])



  const handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      handleQuery()
    }
  }

  const handleExprot = async () => {
    let filtercol = JSON.parse(JSON.stringify(columnarr)).filter(item => item.show == true)
    //console.log("filtercol,", filtercol)
    useexcelauto(selectedRows, filtercol, '操作日志列表')
  }

  //路由跳转
  const tonormal = (route) => {
    history.push({ pathname: route });
  }
  const handleselectfather = (selectedRows, selectedRowKeys) => {
    //console.log(selectedRows)
    setselectedRows(selectedRows)
    setselectedRowKeys(selectedRowKeys)
  }


  return (
    <div style={{    height: "94%", backgroundColor: `#F1F1F1`,right:"1%",top:"4vh",overflow:"hidden",
      backgroundSize: "100% 100%", width: collapsed?"94%":"84%", position: "absolute",  color: "white", fontSize: "0.8rem"}}>


      <div style={styles.kshcontainer}>
        <div style={{ width: "100%", height: "90%", backgroundColor: "white", fontSize: "0.8rem" }}>
          <div style={styleobj.linestyle}>
            <div style={styleobj.lineleft}><a style={{ color: "red" }}></a>&nbsp;操作日志列表</div>

          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;原始语句：&nbsp;
          <Input style={{ width: "10%" }}
            placeholder="输入原始语句查询..." value={ysyj}
            onChange={e => { setysyj(e.target.value) }} /> &nbsp;

          &nbsp;&nbsp;&nbsp;  <Button style={{ backgroundColor: "white", color: "#2b55b6", fontWeight: "800" }}
            onClick={() => { isloading ? openNotification_util("请等待数据查询完成再操作！") : handleQuery() }}
            ><ReloadOutlined />刷新</Button>
{/* 
          &nbsp;&nbsp;&nbsp;  <Button style={{ backgroundColor: "white", color: "#2b55b6", fontWeight: "800" }}
            onClick={() => { refreshqx() }}
            ><SearchOutlined />同步权限</Button> */}

          &nbsp;&nbsp;&nbsp;  <Button style={{ backgroundColor: "white", color: "#2b55b6", fontWeight: "800" }}
            onClick={handleExprot}><FileExcelOutlined />导 出</Button>
          <Sortable_new tableColnum={columnarr} handleTableColomn={(data) => { setcolumnarr(data); }}
            storageName="Pc_log" style={{ position: 'absolute', right: '2vw', top: '0.5rem', fontSize: "1.5rem" }}
            initSize={initSize} handleInitSize={(data) => { setinitSize(data); storage['Pc_log_initsize'] = data; }}
          />


          {isloading ?
            (<div style={{ width: "10%", height: "10%", position: "absolute", left: "50%", top: "9%", color: "#14d9cc" }}><Spin /></div>)
            :
              <Custom_table_hooks_config tabledata={loglb} tablecolnum={columnarr}
                sfdoubleclick="false" ifhiddencchangeselecttype="true"
                width={"99%"}
                scroll={{ y: 'calc(100vh - 280px)', x: initSize * 1250 }}

                calcolor={(text) => {
                  var color = "black"
                  if (text == "正常质检" || text == "已分切")
                    color = "#13a41c"
                  else if (text == "批改质检") { color = "orange" }
                  //  else if (text == "正常分切")
                  //  { color = "#0fac1a"}
                  else if (text == "严重" || text == "关闭") { color = "#ea290f" }
                  else;
                  return color
                }}
                selectedRows={selectedRows} selectedRowKeys={selectedRowKeys}
                handleselectson={(selectedRows, selectedRowKeys) => { handleselectfather(selectedRows, selectedRowKeys) }}
              />
    
          }
        </div>

      </div>
    </div>
  )
}


export default Czlog


var styles = {
  maincontainer: {
    height: "100vh", backgroundColor: `#F1F1F1`,
    backgroundSize: "100% 100%", width: "100%", position: "absolute", left: "0", color: "white", fontSize: "0.8rem"
  },
  topcontainer: {
    width: "100%", height: "10vw", backgroundImage: "linear-gradient(to bottom,#e4e5eb , white)", paddingTop: "3vw",
    position: "relative", fontSize: "0.89rem", textIndent: "2rem", fontWeight: "800", color: "#a91f24", borderRadius: "0 0 15px 15px"
  },
butdcstyle: { paddingLeft:"1.5vw",paddingRight:"1.5vw", height: "2vw", position: "absolute", right: "1%", top: "0%", backgroundColor: "#a91f24", fontSize: "0.8vw", borderRadius: "0 0 0.3vw 0.3vw" },
butmainstyle: { paddingLeft:"1.5vw",paddingRight:"1.5vw", height: "2vw", position: "absolute", right: "8%", top: "0%", backgroundColor: "#a91f24", fontSize: "0.8vw", borderRadius: "0 0 0.3vw 0.3vw" },


kshcontainer: {
  width: "100%", minHeight: "40vh", position: "absolute", top: "2vh", left: "0vw", backgroundColor: "#F1F1F1",
  color: "black"
},
}
var styleobj = {
  linestyle: { height: "1.8rem", fontSize: "0.7rem", position: "relative", width: "100%", textIndent: "1rem" },
  linestylesmall: { height: "1.3rem", fontSize: "0.7rem", position: "relative", width: "100%", textIndent: "1rem" },

  linestyleflex: {
    height: "1.8rem", fontSize: "0.6rem", position: "relative", width: "96vw", marginLeft: "0.1%",
    display: "flex", justifyContent: "flex-start", alignItems: "center", marginBottom: "0.5rem",marginTop:"0.5rem"
  },
  linestyleflexitem: {
    height: "1.6rem", fontSize: "0.7rem", position: "relative", width: "23%", textIndent: "0.5rem",
    backgroundColor: "white", lineHeight: "1.6rem", fontSize: "0.75rem", fontWeight: "500", textAlign: "center"
  },
  linestyleflexitemleft: { backgroundColor: "#F0F0F0", position: "absolute", width: "35%", left: "0" },
  linestyleflexitemright: { backgroundColor: "white", position: "absolute", width: "64%", right: "0" },
  lineleft: { width: "100%", height: "100%", position: "absolute", left: "0%", textAlign: "left", lineHeight: "2rem", fontSize: "0.75rem", fontWeight: "700" },
}